<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变量绑定</title>
</head>

<body>
  <!-- 定义vue管理的容器 -->
  <div id="root">
    <!-- 
      插值表达式中的{{}}环境可以当前是js环境，当然它不是完全的js环境

     -->
    <!-- 字符串 -->
    <div>{{ username }}</div>
    <!-- 数组 -->
    <div>{{ arr[1] }}</div>
    <!-- 对象 -->
    <div>{{ obj.name }}</div>
    <!-- 赋值语法就不可以在vue中的插值表达式中使用 -->
    <!-- <div>{{ let b=20 }}</div> -->
    <!-- 表达式 -->
    <div>{{ 1 + 1 }}</div>
    <!-- 字符串连接 -->
    <div>{{ '你好世界 ---' + username }}</div>
    <!-- 调用js方法 -->
    <div>{{ title.substr(0,2) }}</div>
    <div>{{ arr.join('-') }}</div>
    <!-- 三目运算 -->
    <div>{{ age>20 ? '儿童' : '老年' }}</div>
    <!-- 调用vue自定义方法 -->
    <div>{{ uname() }}</div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    var a = 10
    const app = new Vue({
      // 指定管理的html中的标签选择器的名称  容器
      el: '#root',
      // 数据源 -- 初始数据
      data: {
        title: '突然坍塌的乡村饭店，和“天塌了”的八十寿宴',
        // 字符串
        username: '张三',
        // 数组
        arr: [1, 2, 3],
        // 对象
        obj: { name: '2001' },
        age: 19
      },
      // vue自定义的方法 集合体，可以定义n多个方法
      methods: { // 在methods定义的方法中可以通过 this.名称来获取data定义的数据
        // 箭头保留this的指向,此时在对象中，需要this指向发生改变，所以在methods中不要用箭头函数
        // uname:function(){
        uname() {
          console.log(this.username)
          return 'abc'
        }
      }
    })

  </script>
</body>

</html>